<template>
    <!-- 我的优惠券 -->
    <view class="coupon_detail_page">
        <CouponDetail
            v-if="Data.id"
            :Data="Data"
            @comfirm="confirmHandler"
            :showBtn="!(props.userCouponStatus > 0)"
            btnName="立即使用"></CouponDetail>
        <view v-else class="none-end">
            <img class="empty" :src="getImgOssUrl('/ui-prod-2.3.0/empty-addr@2x.png')" />
            暂无数据~
        </view>
        <Loading />
    </view>
</template>
<script setup>
import Loading from '@/components/el-loading';
import CouponDetail from '@/components/coupon/detail.vue';
import { getImgOssUrl } from '@/commons/utils';
import { ref, reactive, onMounted } from 'vue';
import storage from '@/commons/storage';
import router from '@/router';
import request from '@/request';

const props = defineProps({
    // 优惠券id || 我的优惠券id
    couponId: {
        type: [String, Number],
        default: ''
    },
    // 0-未使用，1-已使用，2-已过期
    userCouponStatus: {
        type: [String, Number],
        default: ''
    }
});
const Data = reactive({
    id: null,
    invalid: false,
    // 优惠券类型 1-满减、2-折扣
    couponType: null,
    // 优惠券标题
    couponTitle: null,
    // 优惠券描述
    couponDescription: null,
    // 每满即减 1-否、2-是
    couponEveryDecrease: 1
});

const queryCouponInfo = () => {
    request('queryCouponDetailServ', {
        couponId: props.couponId,
        shopId: storage.get('ZW_SHOP_ID'),
        userId: storage.get('userId')
    }).then(result => {
        const res = result.data;
        Object.assign(Data, res, {
            id: res.id
        });
    });
};

const queryMyCouponInfo = () => {
    request('queryMineCouponDetailServ', {
        id: props.couponId
    }).then(result => {
        const res = result.data;
        Object.assign(Data, res, {
            couponDiscountContent: res.customerCouponDiscountContent,
            couponType: res.customerCouponType,
            couponDescription: res.customerCouponDescription,
            couponDiscountMost: res.customerCouponDiscountMost || 0,
            couponTitle: res.customerCouponTitle,
            couponTimeStart: res.customerCouponExpireTimeStart,
            couponTimeEnd: res.customerCouponExpireTimeEnd,
            couponMatch: res.customerCouponMatch,
            couponPrerequisites: res.customerCouponPrerequisites,
            couponPrerequisitesAdditional: res.customerCouponPrerequisitesAdditional,
            couponEveryDecrease: res.customerCouponEveryDecrease,
            couponTimeType: 1
        });
    });
};

const confirmHandler = () => {
    if (props.userCouponStatus > 0) {
        return;
    }
    router.push({
        path: '/pages-user/coupon/use/index',
        query: {
            couponId: Data.customerCouponOriginId
        }
    });
};

onMounted(() => {
    // 我的优惠券详情
    if (props.userCouponStatus > -1) {
        Data.invalid = Number(props.userCouponStatus);
        queryMyCouponInfo();
    } else {
        // 优惠券配置详情
        queryCouponInfo();
    }
});
</script>
<style lang="scss" scoped>
.none-end {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    font-size: 28rpx;
    color: #333333;
    padding: 342rpx 29rpx 0 29rpx;
    .empty {
        width: 279rpx;
        height: 216rpx;
    }
}
</style>
